<template>
  <div id="app">
    <!-- 放一个坑 ,用来承载路径匹配到的路由组件 -->
    <RouterView />

    <h1>我是 App</h1>

    <!-- 
      声明式导航 使用 name 的跳转  :to="{ name: 'xxx' }"
     -->
    <RouterLink :to="{ name: 'abc' }">首页</RouterLink>
    <RouterLink :to="{ name: 'about' }">关于页面</RouterLink>
    <!-- <button @click="goAbout">关于页面</button> -->
  </div>
</template>

<script>
export default {
  name: "App",

  methods: {
    goAbout() {
      // 下面这块控制逻辑不适合
      //    1. 限制了只能用编程式导航
      //    2. 没有限制用户直接修改url地址到 关于页面

      // 做一些事情
      if (localStorage.getItem("token")) {
        // 可以跳转
        this.$router.push({ name: "about" });
      } else {
        // 不可以跳转
        // ....
      }
    },
  },
};
</script>

<style>
.router-link-active {
  color: red;
}
</style>
